<template>
  <v-container>
    <v-row no-gutters align="center">
      <v-col cols="auto" xl="5" lg="6" md="5" sm="5">
        <v-row no-gutters align="center">
          <v-col cols="auto">
            <v-img
              :max-height="$vuetify.breakpoint.smAndDown ? 50 : 100"
              :max-width="$vuetify.breakpoint.smAndDown ? 50 : 100"
              :src="
                $vuetify.breakpoint.smAndDown ? '/logo.png' : '/banzhuan.png'
              "
              contain
            ></v-img>
          </v-col>
          <v-col cols="auto">
            <v-row no-gutters class="hidden-sm-and-down item_menu">
              <v-col class="pa-4"
                ><nuxt-link
                  to="/"
                  class="text-decoration-none"
                  :class="url == '/' ? 'blue--text' : 'grey--text'"
                  >首页</nuxt-link
                ></v-col
              >
              <v-col class="pa-4"
                ><nuxt-link
                  to="/mistalk"
                  class="text-decoration-none"
                  :class="url == '/mistalk' ? 'blue--text' : 'grey--text'"
                  >杂谈</nuxt-link
                ></v-col
              >
              <!-- <v-col class="pa-4" :class="url == '/2' ? 'blue--text':'grey--text'">小册</v-col> -->
              <!-- <v-col class="pa-4" :class="url == '/3' ? 'blue--text':'grey--text'">活动</v-col> -->
            </v-row>
            <v-menu offset-y transition="scroll-y-transition">
              <template v-slot:activator="{ attrs, on }">
                <v-tabs
                  color="banzhuan"
                  :hide-slider="true"
                  class="hidden-md-and-up"
                  height="55"
                  active-class="false"
                >
                  <v-tab v-bind="attrs" v-on="on" :ripple="false">
                    {{ url == '/' ? '首页' : '杂谈' }}
                    <v-icon medium>mdi-menu-down</v-icon>
                  </v-tab>
                </v-tabs>
              </template>
              <v-list>
                <v-list-item link>
                  <v-list-item-title>
                    <nuxt-link
                      to="/"
                      class="text-decoration-none"
                      :class="url == '/' ? 'blue--text' : 'grey--text'"
                      >首页</nuxt-link
                    >
                  </v-list-item-title>
                </v-list-item>
                <v-list-item link>
                  <v-list-item-title>
                    <nuxt-link
                      to="/mistalk"
                      class="text-decoration-none"
                      :class="url == '/mistalk' ? 'blue--text' : 'grey--text'"
                      >杂谈</nuxt-link
                    >
                  </v-list-item-title>
                </v-list-item>
                <!-- <v-list-item link>
                        <v-list-item-title>小册</v-list-item-title>
                      </v-list-item>
                      <v-list-item link>
                        <v-list-item-title>活动</v-list-item-title>
                      </v-list-item> -->
              </v-list>
            </v-menu>
          </v-col>
        </v-row>
      </v-col>
      <v-col class="">
        <v-row no-gutters align="center" justify="end" class="text-right">
          <v-col
            cols="6"
            xl="5"
            lg="5"
            md="5"
            v-if="$vuetify.breakpoint.width >= 375"
          >
            <v-form class="text-caption">
              <v-text-field
                dense
                flat
                hide-details
                label="探索搬砖"
                outlined
                rounded
                color="banzhuan"
                :append-icon="
                  $vuetify.breakpoint.smAndUp ? 'mdi-search-web' : ''
                "
              ></v-text-field>
            </v-form>
          </v-col>
          <v-col
            cols="auto"
            class="pl-6"
            v-if="$vuetify.breakpoint.width >= 860"
          >
            <v-btn tile color="banzhuan" class="white--text">
              <v-icon left> mdi-pencil </v-icon>
              发表职位
            </v-btn>
          </v-col>
          <v-col cols="auto" v-if="islogin" class="px-6">
            <nuxt-link
              to="/notify"
              class="text-decoration-none"
              style="color: black"
            >
              <v-badge
                color="red"
                :content="messages"
                overlap
                :value="messages"
              >
                <v-icon>mdi-bell</v-icon>
              </v-badge>
            </nuxt-link>
          </v-col>
          <v-col cols="auto" class="pl-6" v-if="!islogin">
            <v-btn outlined color="banzhuan" @click="goToLogin"> 登录 </v-btn>
          </v-col>
          <v-col cols="auto" class="" v-if="islogin">
            <v-menu
              offset-y
              :nudge-width="60"
              origin="center left"
              transition="scale-transition"
              :nudge-bottom="10"
            >
              <template v-slot:activator="{ on, attrs }">
                <v-avatar
                  color="grey darken-1 "
                  size="32"
                  v-bind="attrs"
                  v-on="on"
                >
                  <img
                    src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4075663167,1198688310&fm=26&gp=0.jpg"
                    alt="John"
                /></v-avatar>
              </template>

              <v-card class="" tile>
                <v-list dense>
                  <v-list-item-group color="banzhuan">
                    <v-list-item>
                      <nuxt-link
                        :to="{ path: '/homepage', query: { tab: 1 } }"
                        class="text-decoration-none"
                        style="color: black"
                      >
                        <v-list-item-content>
                          <v-list-item-title
                            ><v-icon>mdi-account</v-icon> 我的主页
                          </v-list-item-title>
                        </v-list-item-content>
                      </nuxt-link>
                    </v-list-item>

                    <v-list-item>
                      <nuxt-link
                        :to="{ path: '/homepage', query: { tab: 2 } }"
                        class="text-decoration-none"
                        style="color: black"
                      >
                        <v-list-item-content>
                          <v-list-item-title
                            ><v-icon>mdi-thumb-up</v-icon>
                            我赞过的</v-list-item-title
                          >
                        </v-list-item-content>
                      </nuxt-link>
                    </v-list-item>
                    <v-list-item>
                      <nuxt-link
                        :to="{ path: '/homepage', query: { tab: 5 } }"
                        class="text-decoration-none"
                        style="color: black"
                      >
                        <v-list-item-content>
                          <v-list-item-title
                            ><v-icon>mdi-tag-heart</v-icon>
                            标签管理</v-list-item-title
                          >
                        </v-list-item-content>
                      </nuxt-link>
                    </v-list-item>
                    <v-divider></v-divider>
                    <v-list-item>
                      <nuxt-link
                        to="/setting"
                        class="text-decoration-none"
                        style="color: black"
                      >
                        <v-list-item-content>
                          <v-list-item-title
                            ><v-icon>mdi-cog</v-icon> 设置</v-list-item-title
                          >
                        </v-list-item-content>
                      </nuxt-link>
                    </v-list-item>
                    <v-list-item>
                      <nuxt-link
                        to="/about"
                        class="text-decoration-none"
                        style="color: black"
                      >
                        <v-list-item-content>
                          <v-list-item-title
                            ><v-icon>mdi-alert-circle</v-icon>
                            关于</v-list-item-title
                          >
                        </v-list-item-content>
                      </nuxt-link>
                    </v-list-item>
                    <v-divider></v-divider>
                    <v-list-item>
                      <v-list-item-content>
                        <v-list-item-title
                          ><v-icon>mdi-logout</v-icon> 登出</v-list-item-title
                        >
                      </v-list-item-content>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>
              </v-card>
            </v-menu>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <Login
      :isLoginDialog="isLoginDialog"
      @changeisLoginDialog="changeisLoginDialog"
    />
  </v-container>
</template>

<script>
import Login from '~/components/common/Login'
export default {
  name: 'Header',
  components: { Login },
  data: () => ({
    messages: 0,
    islogin: true,
    isLoginDialog: false,
    url: '',
    items: [...Array(4)].map((_, i) => `Item ${i}`),
  }),
  methods: {
    goToLogin() {
      this.isLoginDialog = true
    },
    changeisLoginDialog(status) {
      this.isLoginDialog = status
    },
  },
  watch: {
    $route: {
      handler(val) {
        console.log(val)
        this.url = val.path
      },
    },
  },
  created() {
    this.url = this.$route.path
  },
}
</script>

<style>
.v-toolbar__content,
.v-toolbar__extension {
  padding: 0;
}
</style>
